<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import { markRaw, onMounted } from 'vue'
const open = () => {
    // 接受两个参数message内容和title标题
    ElMessageBox.alert('这是一个alert提示框', '标题', {
        // confirmButtonText 为确认内容
        confirmButtonText: '确认',
        // callback 回调函数，当函数被调用时触发
        callback: () => {
            ElMessage({
                // type 有success info warning error四种
                type: 'success',
                message: `成功`,
            })
        },
    })
}
const open1 = (action) => {
    // 接受两个参数也是message内容和title标题
    ElMessageBox.confirm(
        '这是confirm对话框',
        '标题',
        // confirmButtonText确认的内容
        // cancelButtonText取消的内容
        // type为默认图标样式
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            // draggable为是否可拖拽，默认为不能摆脱可视区
            draggable: true,
            // overflow 设置是可以摆脱可视区
            overflow: true,
            type: 'success',
            // icon定义前面的图标
            icon: markRaw(Delete),
        }
    )
        // then 为点击成功的时候的内容
        .then(() => {
            ElMessage({
                type: 'success',
                message: '确认',
            })
        })
        // catch 为点击取消的时候的内容
        .catch(() => {
            console.log(action);

            ElMessage({
                type: 'warning',
                message: '取消',
            })
        })
}
const open2 = () => {
    ElMessageBox.prompt('请输入你的邮箱', '标题', {
        // type为默认图标，可以不写就是没有

        confirmButtonText: '确认',
        cancelButtonText: '取消',
        // distinguishCancelAndClose设置后将取消和关闭分离为cancel何close
        distinguishCancelAndClose: true,
        // center 为将内容都居中
        // center: true,
        // inputPattern为匹配规则，可以不写,不写默认提交
        inputPattern:
            /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage为规则不符合的提示
        inputErrorMessage: '不匹配提示',
        // 在关闭之前触发
        beforeClose: (action, instance, done) => {
            // action为点击确认就是confirm，取消就是cancel
            // instance 为消息框对象

            if (action === 'confirm') {
                // confirmButtonLoading为按钮是否为加载状态,后面是文字
                instance.confirmButtonLoading = true
                instance.confirmButtonText = 'Loading...'
                setTimeout(() => {
                    done()
                    setTimeout(() => {
                        instance.confirmButtonLoading = false
                    }, 300)
                }, 3000)
            } else {
                done()
            }
        },
    })
        // value 为接受的内容
        .then(({ value }) => {
            ElMessage({
                type: 'success',
                message: `你输入的内容是:${value}`,
            })
        })
        .catch((action) => {
            if (action === 'close') {
                ElMessage({
                    type: 'info',
                    message: '点击了关闭',
                })
            } else {
                ElMessage({
                    type: 'info',
                    message: '点击了取消',
                })
            }

        })
}
</script>
<template>
    <div>
        <pre>
            messagebox需要引入样式
        import 'element-plus/theme-chalk/el-message.css';
        import 'element-plus/theme-chalk/el-message-box.css';
        不然默认没有样式
        </pre>


    </div>
    <el-button plain @click="open">
        提示框alert
    </el-button>
    <el-button plain @click="open1">
        是否删除框confirm
    </el-button>
    <el-button @click="open2">
        填写内容框prompt
    </el-button>
</template>
